<template>
    <div class="person">
        <h1>情况四：监视对象中的某个属性，且该属性是基本类型的，要写成函数式</h1>
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>
        <h2>车辆一:{{ person.car.c1 }}</h2>
        <h2>车辆二:{{ person.car.c2 }}</h2>


        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeCar1">修改车辆一</button>
        <button @click="changeCar2">修改车辆一</button>
        <button @click="changeCar">修改所有车</button>
    </div>
</template>



<script lang="ts" setup name="Person">
    import {reactive, watch} from 'vue'

    //数据
    let person=reactive({
        name:'李白',
        age:19,
        car:{
            c1:'宝马',
            c2:'奔驰'
        }
    })


    //方法
    function changeName(){
        person.name+='!'
    }
    function changeAge(){
        person.age+=1
    }
    function changeCar1(){
        person.car.c1='坦克'
    }
    function changeCar2(){
        person.car.c2='迈巴赫'
    }
    function changeCar(){
        person.car={c1:'小米',c2:'比亚迪'}
    }


    //监视
    watch(()=>person.car,(newVal,oldVal)=>{
        console.log('person变化了',newVal,oldVal)
    },{deep:true})
</script>






<style scoped>
    .person {
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>